<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02计算器</title>
</head>
<body>
<input type="text" id="1">
+
<input type="text" id="2">
=
<br>
<button onclick="f1('+')">加</button>
<button onclick="f1('-')">减</button>
<button onclick="f1('*')">乘</button>
<button onclick="f1('/')">除</button>

运算结果: <span id='span'></span>

<script>
    function f1(o) {
        let n1 = document.getElementById('1').value;
        let n2 = document.getElementById('2').value;
        n1 = parseFloat(n1);
        n2 = parseFloat(n2);
        if(isNaN(n1)||isNaN(n2)){
          alert('请输入数字');
        }
        let spanE = document.querySelector('span');
        switch (o) {
            case '+':
                //console.log(Number(n1)+Number(n2));
                spanE.innerHTML = n1 + n2;
                break;
            case '-':
                //console.log(Number(n1)-Number(n2));
                spanE.innerHTML = n1 - n2;
                break;
            case '*':
                //console.log(Number(n1)*Number(n2));
                spanE.innerHTML = n1 * n2;
                break;
            case '/':
                //console.log(Number(n1)/Number(n2));
                spanE.innerHTML = n1 / n2;
                break;
        }


    }

</script>
</body>
</html>